<template>
  <el-dialog
    title="创建产品"
    class="add-product"
    :visible.sync="visible"
    width="500px"
    :before-close="handleClose"
  >
    <div class="rela" style="height: 250px;">
      <div class="y flex-column justify-between">
        <div>
          <el-button @click="handleMove(0.2,0)">前</el-button>
        </div>
        <div>
          <el-button @click="handleMove(-0.2,0)">后</el-button>
        </div>
      </div>
      <div class="x justify-between">
        <el-button @click="handleMove(0,-0.5)">左</el-button>
        <el-button @click="handleMove(0,0.5)">右</el-button>
      </div>
    </div>
    <span slot="footer" class="justify-center">
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { apiSetOperateSpeed } from '@/views/device/create-product/api'

  export default {
    name: 'DeviceControl',
    props: {
      visible: { type: Boolean, require: true, default: true },
      value: {
        type: Object, require: false, default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        formData: {}
      }
    },
    methods: {
      handleClose() {
        this.loading = false
        this.$emit('update:visible', false)
      },
      handleMove(lineSpeed, angularVelocity) {
        apiSetOperateSpeed('dadao210525', lineSpeed, angularVelocity)
      }
    }
  }
</script>

<style scoped lang="scss">
  .x{
    position: absolute ;
    top: 45%;
    width: 100%;

  }

  .y{
    position: absolute;
    left: 45% ;
    height: 250px;
  }
</style>
